<template>
  <BasicTable @register="registerTable">
    <template #tableTitle>
      <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增事件</a-button>
      <a-button type="primary" preIcon="ic:round-expand" @click="expandAll">展开全部</a-button>
      <a-button type="primary" preIcon="ic:round-compress" @click="collapseAll">折叠全部</a-button>
    </template>
  </BasicTable>
  <InputForm @register="registerForm" @success="reload" showFooter />
  <Detail @register="registerDetail"/>
</template>
<script lang="ts" name="log-event" setup>
import { nextTick, ref, onMounted } from 'vue';
import { BasicTable, BasicColumn, useTable } from '/@/components/Table';
import { useDrawer } from '/@/components/Drawer';
import InputForm from './Form.vue';
import Detail from './Detail.vue';
import { columns, searchFormSchema, isEventObject } from './data';
import { listLogEventTree, listLogEvent, deleteLogEvent, batchDeleteLogEvent } from './api';
import { useRouter } from "vue-router"
import { useMessage } from '/@/hooks/web/useMessage';
import { Icon } from '/@/components/Icon';
import { useUserStore } from '/@/store/modules/user';

const userStore = useUserStore()
const selectTenant = userStore.getSelectTenant
const { createMessage } = useMessage();
const router = useRouter()

const checkedKeys = ref<Array<string | number>>([]);
const [registerForm, { openDrawer: openInputForm }] = useDrawer();
const [registerDetail, { openDrawer: openDetail }] = useDrawer();


const actionColumn: BasicColumn = {
  width: 160,
  title: '操作',
  dataIndex: 'action',
  fixed: 'right',
  slot: 'tableActions',
  actions:  (record: Recordable) => [
    {
      label: '编辑',
      onClick: handleEdit.bind(null, record),
    },
    {
      label: '删除',
      color: 'error',
      popConfirm: {
        title: `是否确认删除 ${record.eventValue}`,
        confirm: handleDelete.bind(null, record),
      },
    }
  ],
  dropDownActions: (record: Recordable) => [
    {
      label: '详情',
      onClick: handleDetail.bind(null, record),
    },
    {
      label: '添加事件类型',
      ifShow: () => isEventObject(record.parentKey),
      onClick: handleAddSub.bind(null, record),
    }  
  ]
}

const [registerTable, { reload, getForm, expandAll, collapseAll, expandCollapse }] = useTable({
  title: '日志事件',
  api: listLogEventTree,
  immediate: false,
  formConfig: {
    labelWidth: 70,
    baseColProps: { lg: 8, md: 24 },
    showSubmitButton: false,
    showResetButton: false,
    schemas: searchFormSchema,
  },
  columns: columns,
  size: 'small',
  pagination: false,
  isTreeTable: true,
  striped: true,
  useSearchForm: true,
  showTableSetting: false,
  bordered: false,
  showIndexColumn: false,
  tableSetting: { fullScreen: true },
  actionColumn
})
onMounted(() => {
  const { updateSchema } = getForm()
  updateSchema([
    {
      field: 'eventObjectKey',
      componentProps:  ({ formModel, formActionType }) =>{
        const {setFieldsValue} = formActionType
        return {
          optionFilterProp: "label",
          showSearch: true,
          api: listLogEvent,
          onOptionsChange: (options) => {
            
          },
          onSelect: (value: any, option: any) => {
            setFieldsValue({eventObjectKey: option.value})
            reload()
          },
        }
      },
      colProps: { span: 8 },
    },
  ])
  reload()
})

function onSelectChange(selectedRowKeys: (string | number)[]) {
  checkedKeys.value = selectedRowKeys;
}

function handleCreate() {
  openInputForm(true, {
    isUpdate: false,
  });
}

/**
 * 编辑
 */
function handleEdit(record) {
  openInputForm(true, {
    record,
    isUpdate: true,
  });
}

function handleDetail(record) {
  openDetail(true, {
    record,
    isUpdate: true
  });
}

function handleAddSub(record) {
  openInputForm(true, {
    record: { 'parentKey': record.eventKey },
    isUpdate: false,
  });
}

async function handleDelete(record) {
  await deleteLogEvent({ id: record.id }, reload);
}

</script>
